<template>
  <div class="contents-container">
    <div class="search-area">
      <span class="lable-span"><i class="el-icon-search" /> 文章</span>
      <el-select v-model="editId" size="mini" style="width:380px;" placeholder="请选择文章" @change="selectChange">
        <el-option label="请选择文章标题" value="" />
        <el-option v-for="item in articleList" :key="item.articleId" :label="item.title" :value="item.articleId" />
      </el-select>
      <el-button size="mini" class="ml-15" type="success" @click="addHandle">新增文章</el-button>
      <el-button v-if="modeValue=='edit'" size="mini" class="ml-15" type="primary" @click="updateHandle">修改文章</el-button>
      <el-button v-if="editId" size="mini" class="ml-15" type="danger" @click="deletcArticle">删除文章</el-button>
      <el-button v-if="modeValue" size="mini" class="ml-15" @click="cancleEdit">取消操作</el-button>
    </div>
    <div class="editContent">
      <div v-if="saveShow" class="editTitle">
        <span class="lable-span"><span style="color:red;">*</span>文章标题</span>
        <el-input v-model="title" class="my-input" size="mini" style="width:380px;margin-left:10px;" />
      </div>
      <div class="tinymce-content">
        <div class="editBox">
          <tinymce id="tin1" ref="tin1" v-model="articleDesc" :height="600" style="width:391px;" />
          <div class="contentSave">
            <el-button v-if="saveShow" type="primary" @click="handleSubmit">
              保存
            </el-button>
          </div>
        </div>
        <!-- <div class="phoneBox">
          <div class="previewBox">
            <div class="editor-content" v-html="articleDesc" />
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
	import {
		addArticle,
		editArticle,
		deleteArticle,
		getArticleList,
		getArticleDetail
	} from '@/api/article'
	import Tinymce from '@/components/Tinymce'
	export default {
		name: 'CaseEdit',
		components: {
			Tinymce
		},
		data() {
			return {
				articleDesc: '',
				title: '',
				articleList: [],
				editId: '', // 编辑中的文章id
				modeValue: '',
				listQuery: {
					page: 1, // 当前页码
					limit: 999 // 每页数量
				},
				saveShow: false
			}
		},
		mounted() {
			this.getListData()
		},
		methods: {
			getListData() {
				this.$loadings().close()
				getArticleList(this.listQuery).then((res) => {
					this.$loadings().close()
					this.articleList = res.data
				}).catch(() => {
					this.$loadings().close()
				})
			},
			addHandle() {
				this.modeValue = 'add'
				this.saveShow = true
				this.editId = ''
				this.articleDesc = ''
				this.title = ''
				this.$refs.tin1.setContent('')
			},
			updateHandle() {
				this.modeValue = 'edit'
				this.saveShow = true
			},
			handleSubmit() {
				const that = this
				if (!that.title) {
					that.$message({
						type: 'danger',
						message: '请输入文章标题!'
					})
					return false
				}
				if (!that.articleDesc) {
					that.$message({
						type: 'danger',
						message: '请输入文章内容!'
					})
					return false
				}
				that.$loadings()
				if (!that.editId) {
					addArticle({
						articleDesc: that.articleDesc,
						title: that.title
					}).then(data => {
						that.$loadings().close()
						that.$message({
							type: 'success',
							message: '操作成功!'
						})
						that.getListData()
						that.cancleEdit()
					}).catch(() => {
						that.$loadings().close()
					})
				} else {
					editArticle({
						articleDesc: that.articleDesc,
						title: that.title,
						articleId: that.editId
					}).then(data => {
						that.$loadings().close()
						that.$message({
							type: 'success',
							message: '操作成功!'
						})
						that.getListData()
						that.cancleEdit()
					}).catch(() => {
						that.$loadings().close()
					})
				}
			},
			cancleEdit() {
				this.modeValue = ''
				this.articleDesc = ''
				this.title = ''
				this.editId = ''
				this.saveShow = false
				this.$refs.tin1.setContent('')
			},
			selectChange(value) {
				const that = this
				that.modeValue = 'edit'
				that.loading = true
				that.editId = value
				that.$loadings()
				getArticleDetail(value).then((res) => {
					that.$loadings().close()
					that.loading = false
					that.articleDesc = res.data.articleDesc
					that.title = res.data.title
					this.$refs.tin1.setContent(that.articleDesc)
				}).catch((err) => {
					that.$loadings().close()
					that.loading = false
					console.log(err)
				})
			},

			deletcArticle() {
				const that = this
				that.$confirm('是否删除该条数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.$loadings()
					deleteArticle({
						articleId: that.editId
					}).then((res) => {
						that.$loadings().close()
						that.$message({
							type: 'success',
							message: '操作成功!'
						})
						that.getListData()
						that.cancleEdit()
					}).catch(() => {
						that.$loadings().close()
					})
				})
			}
		}
	}
</script>

<style scoped>
	.editContent {
		margin-top: 20px;
	}

	.tinymce-content {
		margin: 10px 0px;
		display: flex;
	}

	.editTitle {
		padding-left: 20px;
		font-size: 14px;
	}

	.editBox {
		width: 375px;
    margin-left:20px;
	}

	.phoneBox {
		background: url('../../assets/img/phonebg.png') center center no-repeat;
		position: relative;
		width: 426px;
		height: 888px;
	}

	.previewBox {
		width: 375px;
		position: absolute;
		top: 108px;
		left: 26px;
		height: 670px;
		overflow-y: auto;
	}

	.editor-content {
		width: 375px;
    padding: 15px 12.5px;
		font-size: 14px;
	}

	.contentSave {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}
</style>
